<template>
	<div class="page">
		<view class="box">
			<view class="box_herder flex align-items justify-content-between">
				<view class="box_herder_left">操作项目</view>
				<view class="box_herder_right flex align-items" v-if="obj.correlationNumbers.length>0" @click="getByOperateId">
					<view>关联票</view>
					<u-icon :name="show?'arrow-up':'arrow-down'" color="#999999" size="14"></u-icon>
				</view>
			</view>
			<view class="content">
				<!-- <view class="prompt">注：请按顺序执行</view> -->
				<view class="item" v-for=" (v,i) in list" :key="i">
					<view class="item_herder flex   " v-if="v.category !=1">
						<view class="item_herder_left">{{i+1}}.{{v.name}}</view>
						<view v-if="v.annexUrl" class="item_herder_right" @click="nearby(v.annexUrl)">
							查看附件
						</view>
					</view>
					<view class="item_herder flex   " v-if="v.category ==1">
						<view class="item_herder_left">{{i+1}}、
							<view v-for="(vin,inx) in v.inputList" :key="inx">
								<view>{{vin}}</view>
							
									<block v-if="v.ifJump ==1">
									<u--input v-model="ifJus" :readonly="stepIdx != i || v.state ==1"
										class="input" border="surround"></u--input>
										</block>
										<block  v-if="v.ifJump !=1">
											<u--input v-model="v.answer[inx].value" :readonly="stepIdx != i || v.state ==1"
												class="input" border="surround"></u--input>
										</block>
										
							</view>
							<view>{{v.inputTxt}}</view>
						</view>
						<view v-if="v.annexUrl" class="item_herder_right">
							查看附件
						</view>
					</view>
					<!-- 判断 -->
				<!-- 	<view v-if="v.category ==0" class="">
						<view class="item_rideo flex align-items margin-top15" v-for="(vi,idx) in v.shopList">
							<image class="item_rideo_img" src="/static/img/index/yixuanzhong.png"
								v-if="determineSelect(i,vi.value)" mode="">
								<view class="item_rideo_yuan" v-else> </view>
							</image>
							<view class="item_rideo_txt" :class="{
							txtColor: true
						}">{{vi.value}}</view>
						</view>
					</view> -->
					<!-- 填空 -->
					<!-- 			<view v-if="v.category ==1" class="item_input">
						<block v-for="(vi,idx) in v.shopList" :key="idx">
							<u--input v-model="v.answer[idx].value" :readonly="true" class="input"
								:placeholder="vi.value" border="surround"></u--input>
						</block>
					</view> -->
					<!-- 选择 -->
					<view v-if="v.category ==2" class="item_rideo flex  align-items margin-top15"
						v-for="(vi,idx) in v.shopList">
						<view class="item_rideo_yuan1" v-if="!answerSelect(i,vi.value)"> </view>
						<!-- 		<image class="item_rideo_img" v-if="answerSelect(i,vi.value)"
							src="/static/img/index/xuanzhong.png" mode=""> -->
						<view class="item_rideo_yuan2" v-if="answerSelect(i,vi.value)">
							✔
						</view>
						<view class="item_rideo_txt" :class="{
							txtColor:true
						}">{{vi.value}}</view>
					</view>
					<view class="item_upload" v-if="v.ifPhotograph ==1">
						<u-upload :fileList="v.file" :capture="['camera']" :disabled="stepIdx != i || v.state ==1"
							@afterRead="(event)=>afterRead(event,i)" @delete="(event)=>deletePic(event,i)" name="1"
							multiple :maxCount="1"></u-upload>
					</view>
					
					<view class="ifJump" v-if="v.ifJump ==1">  跳步操作</view>
				</view>
			</view>
		</view>
		<view class="btn flex">
			<view class="btn_jiaojie" @click="jumpTo('/pages/editOperation/editOperation',{
				id:obj.id
			})">修改交接</view>
			<view class="btn_wancheng" @click="completeShow  = true">确认交接</view>
		</view>

		<!-- 完成 -->
		<u-popup :show="completeShow" mode="center" :round="15" zIndex="9999999" @close="completeShow = false">
			<view class="block">
				<view class="block_herder">确认交接</view>
			</view>
			<view class="renmideTiao" style="width: 500rpx ; ">
				确认本次操作流程，确认后不允许修改！
			</view>
			<view class="block_btn flex align-items">
				<view class="block_btn_left" @click="completeShow = false">取消</view>
				<view class="block_btn_right" @click="handoverConfirmComit()">确认</view>
			</view>
		</u-popup>
		<u-popup :show="showAdd" :round="10" zIndex="9999999999999">
			<view class="blocks">
				<view class="blocks_item" v-for=" (v,i) in operateIdList" :key="i" @click="Navto(v)">
					{{v.orderNumber}} <text :style="{
						color:color.get(v.stateColour - 0)
					}
					">（{{txt.get(v.stateColour - 0)}}）</text>
				</view>
				<view class="hr"></view>
				<view class="blocks_close" @click="showAdd =false">取消</view>
			</view>
		</u-popup>

	</div>
</template>

<script>
	import {
		handoverConfirm
	} from '@/api/risks.js'
	import {
		byOperateId
	} from '@/api/lssue.js'
	const color = new Map([
		[0, "#267DFF"],
		[1, "#E04734"],
		[2, "#8B8B8B"],
		[3, "#267DFF"],
		[4, "#E04734"],
	])
	const txt = new Map([
		[0, '待审批'],
		[1, '去处理'],
		[2, '已结束'],
	    [3, '交接待确认'],
	    [4, '作废'],
	])
	export default {
		props: {
			listProcess: {
				type: Array,
				default: []
			},
			obj: {
				type: Object,
				default: {}
			},

		},
		data() {
			return {
				color,
				txt,
				list: [{
						annex_url: 1, //判断是否有附件 0无 1有
						title: '接值（班）长令：启动（ ）号炉磨煤机。',
						if_photograph: 1, //是否拍照0:不用1:需要
						category: 1, //0:判断1:填空2:选择
						value: '1', //收入的值 或者选择的值
					},
					{
						annex_url: 1, //判断是否有附件 0无 1有
						title: '暖磨及防爆：提前10分钟将，冷炉烟风机出、入口门全开；磨煤机入口热风调门1号风门保持开启状态 。',
						if_photograph: 0, //是否拍照0:不用1:需要
						category: 0, //0:判断1:填空2:选择
						value: '1', //收入的值 或者选择的值
					},
					{
						annex_url: 0, //判断是否有附件 0无 1有
						title: '切换风源：开大排粉机入口总风门4号门，逐渐关小7号门至全关。逐渐关闭（    ）号制粉系统热风总门9号门至全关，关小制粉系统2号冷风门进行暖管。保证磨煤机粗粉分离器后负压不低于-2.5kPa，排粉机入口负压不高于-4.5kPa，保持足够通风量，保持一次风速在25—30m/s，防止制粉系统缺风，锅炉燃烧稳定。',
						if_photograph: 0, //是否拍照0:不用1:需要
						category: 2, //0:判断1:填空2:选择
						value: '1', //收入的值 或者选择的值
					}
				],
				fileList1: [],
				completeShow: false,
				idx: 0,
				showAdd: false,
				operateIdList: []

			}
		},
		watch: {

		},
		created() {
			this.list = this.listProcess
			this.stepIdx = this.findLastIndexWithStateOne(this.list)
			console.log(this.listProcess, this.stepIdx, "content");
		},
		methods: {
			Navto(v){
				this.show =false
				if(v.stateColour ==1){
					// this.jumpTo('/pages/addPerform/addPerform', {
					// 	id: v.id,
					// 	// state: state != 4 ? 0 : 1
					// 	state: v.state == 1 ? 0 : v.state == 3 ? 1 : v.state == 4 ? 2 : 0
					// })
					let state =  v.state == 1 ? 0 : v.state == 3 ? 1 : v.state == 4 ? 2 : 0
					uni.redirectTo({
					  url: `/pages/addPerform/addPerform?id=${v.id}&state=${state}`
					});
				}else{
					// this.jumpTo('/pages/detailsPerform/detailsPerform',{
					// 	id:v.id
					// })
					uni.redirectTo({
					  url: `/pages/detailsPerform/detailsPerform?id=${v.id}`
					});
				}
				
			},
			nearby(url) {
				window.open(urlConfig.nearbyUrl + url)
			},
			// 根据id查询关联票
			async getByOperateId(id) {
				const res = await byOperateId({
					id: this.obj.id,
				})
				this.operateIdList = res.datas
				this.showAdd = true
				console.log(res, "res");
			},
			handoverConfirmComit() {
				handoverConfirm({
					id: this.obj.id
				}).then(res => {
					uni.$u.toast('操作成功')
					uni.navigateBack()
				})
			},
			findLastIndexWithStateOne(array) {
				let lastIndex = array.reduce((acc, curr, index) => {
					if (curr.state == 1) {
						return index;
					}
					return acc;
				}, -1);

				// 如果 lastIndex 仍然为 -1，表示数组中没有符合条件的元素，将 lastIndex 设为 0
				if (lastIndex === -1) {
					lastIndex = 0;
				}
				return lastIndex == 0 ? 0 : lastIndex + 1;
			},
			//判断是否选中
			determineSelect(i, value) {
				if (this.list[i].state == 0) {
					if (this.stepIdx != i) return
				}
				if (this.list[i].answer.length <= 0) {
					return false;
				} else {
					return this.list[i].answer[0].value == value
				}
			},
			answerSelect(i, value) {
				const idx = this.list[i].answer.findIndex(v => v.value == value)
				console.log(i, value, idx);
				if (idx >= 0) {
					return true
				} else {
					return false
				}
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				uni.showLoading({
					title: '上传中'
				})
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				uni.hideLoading()
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						},
						fail: (err) => {
							uni.hideLoading()
						}
					});
				})
			},

		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
		/* padding-bottom: 40rpx; */
	}
</style>
<style lang="scss" scoped>
	.page {
		padding-bottom: 120rpx;
	}

	.box {
		margin-top: 18rpx;
		background-color: #FFFFFF;
		padding: 29rpx 34rpx;
		padding-bottom: 0;

		&_herder {
			padding-bottom: 29rpx;
			border-bottom: 1rpx solid #f5f5f5;

			&_left {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 33rpx;
				color: #000000;
			}

			&_right {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 29rpx;
				color: #999999;

				view {
					margin-right: 23rpx;
				}
			}
		}
	}

	.content {
		.prompt {
			margin-top: 21rpx;
			font-weight: 400;
			font-size: 25rpx;
			color: #FF0000;
			text-align: left;
			font-style: normal;
		}

	}

	.item {
		margin-top: 30rpx;
		padding-bottom: 32rpx;
		border-bottom: 1rpx solid #E6E6E6;

		&_herder {
			&_left {
				flex: 1;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 29rpx;
				color: #000000;
				line-height: 40rpx;
			}

			&_right {
				width: 120rpx;
				// height: 100rpx;
				margin-left: 18rpx;
				border-radius: 24rpx;
				border: 1rpx solid #267DFF;
				font-size: 24rpx;
				text-align: center;
				line-height: 50rpx;
				color: #267DFF;
				height: 54rpx;
			}
		}

		&_input {
			margin-top: 40rpx;
		}

		&_upload {
			margin-top: 25rpx;
		}

		&_rideo {
			margin-right: 20rpx;

			&_yuan {
				width: 31rpx;
				height: 31rpx;
				margin-right: 15rpx;
				border: 2rpx solid #E6E6E6;
				border-radius: 50%;
			}

			&_yuan1 {
				width: 31rpx;
				height: 31rpx;
				margin-right: 15rpx;
				border: 2rpx solid #E6E6E6;
				border-radius: 8rpx;
			}

			&_yuan2 {
				width: 31rpx;
				height: 31rpx;
				margin-right: 15rpx;
				border: 2rpx solid #E6E6E6;
				border-radius: 8rpx;
				font-size: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #267DFF;
				color: #FFF;
			}

			&_img {
				width: 34rpx;
				height: 34rpx;
				margin-right: 15rpx;
			}

			&_txt {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 29rpx;
				color: #000000;
			}
		}

		&_select {
			height: 65rpx;
			border: 1rpx solid #CCCCCC;
			padding: 12rpx 18rpx;
			border-radius: 12rpx;
			margin-top: 28rpx;

			view {
				font-weight: 400;
				font-size: 29rpx;

				line-height: 65rpx;
			}

			.view1 {
				color: #CCCCCC;
			}
		}

	}

	.blocks {
		&_item {
			width: 750rpx;
			height: 123rpx;
			font-weight: 400;
			color: #000000;
			line-height: 45rpx;
			text-align: right;
			font-style: normal;
			text-align: center;
			line-height: 123rpx;
			border-bottom: 1rpx solid #F5F5F5;
		}

		.hr {
			height: 10rpx;
			background-color: #F5F5F5;
		}

		&_close {
			height: 123rpx;

			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 33rpx;
			color: #000000;
			text-align: center;
			line-height: 123rpx;
		}
	}

	.item:first-of-type {
		margin-top: 12rpx;
	}

	.item:last-child {
		border: none;
	}

	.input {
		border: 1rpx solid #CCCCCC;
		border-radius: 12rpx;
		margin-top: 20rpx;
	}

	/deep/.u-upload__button {
		width: 100rpx !important;
		height: 100rpx !important;
	}

	/deep/.u-upload__status {
		width: 100rpx !important;
		height: 100rpx !important;
	}

	/deep/ .u-upload__wrap__preview__image {
		width: 100rpx !important;
		height: 100rpx !important;
	}

	.btn {
		position: fixed;
		width: 100%;
		bottom: 0;
		// padding-bottom: 60rpx;
		background-color: #FFFFFF;

		&_jiaojie {
			width: 190rpx;
			height: 89rpx;
			text-align: center;
			line-height: 89rpx;
			border: 1rpx dashed #CCCCCC;
			flex: 1;
		}

		&_tiaobu {
			width: 190rpx;
			height: 89rpx;
			text-align: center;
			line-height: 89rpx;
			border: 1rpx dashed #CCCCCC;


		}

		&_wancheng {
			flex: 1;
			height: 89rpx;
			text-align: center;
			line-height: 89rpx;
			background-color: #267DFF;
			color: #FFF;
		}
	}

	.block {
		width: 600rpx;
		// padding: 0 42rpx;

		&_herder {
			font-weight: 400;
			font-size: 36rpx;
			color: #000000;
			text-align: center;
			padding-top: 51rpx;
			margin-bottom: 20rpx;
		}

		&_item {
			height: 105rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #E6E6E6;

			&_labal {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 33rpx;
				color: #666666;
				width: 196rpx;
			}

			&_value {
				flex: 1;
			}

			&_values {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 33rpx;
				color: #000000;
				margin-right: 20rpx;
			}
		}

		&_item:last-child {
			border: none;
		}

		&_btn {
			border-top: 1rpx solid #E6E6E6;
			height: 88rpx;

			&_left {
				flex: 1;
				text-align: center;
				line-height: 88rpx;
				border-right: 1rpx solid #E0E0E0;

				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 33rpx;
				color: #000000;
			}

			&_right {
				flex: 1;
				text-align: center;
				line-height: 88rpx;


				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 33rpx;
				color: #3388FF;
			}
		}


	}

	.soirder {
		height: 600rpx;
		overflow-y: scroll;
	}

	.leapfrog {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #E6E6E6;
		padding-top: 30rpx;

		&_subject {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 29rpx;
			color: #666666;
			line-height: 47rpx;
			text-align: left;
			flex: 1;
		}

		&_chekred {
			width: 53rpx;
			height: 53rpx;
			border-radius: 9rpx;
			border: 2rpx solid #E6E6E6;
			margin-left: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		&_img {
			width: 32rpx;
			height: 32rpx;
		}

		.subjectColor {
			color: #8B8B8B !important;
		}
	}

	.renmideTiao {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 29rpx;
		color: #999999;
		margin: 0 auto;
		line-height: 41rpx;
		margin-bottom: 40rpx;
		text-align: center;
		margin-top: 20rpx;
	}

	.leapfrog:last-child {
		border: none;
	}

	/deep/.placeholderClass {
		font-weight: 400;
		font-size: 26rpx;
		color: #CCCCCC;
	}

	.vale::before {
		content: '*';
		color: #FF0000;
	}
	.ifJump{
		color: red;
		text-align: left;
		margin-top: 10rpx;
		
	}
</style>